<template>
  <div>
    <!--
         options: 绑定树型数组
         props： 指定关键属性
            label 显示
            value 保存和调接口
            emitPath: false
              传给组件的value属性的值
              和change事件得的值不再是数组，而是最后一个节点的值
            checkStrictly: true
              让我们可以选择中间节点，而不是一定要选择叶子节点
        value: 让谁选中
        change事件： 切换选项的时候触发

     -->
    <el-cascader
      :value="value"
      class="w100"
      size="mini"
      :options="detps"
      :props="{
        label: 'name',
        value: 'id',
        emitPath: false,
        checkStrictly: true
      }"
      @change="changeDept"
    />
  </div>
</template>
<script>
import { getDepartmentList } from '@/api/department'
import { transListToTreeData } from '@/utils'
export default {
  name: 'SelectDept',
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      detps: [] // 树型数组
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      const res = await getDepartmentList()
      this.detps = transListToTreeData(res, 0)
    },
    // 改变选项
    changeDept(newDept) {
      console.log('newDept', newDept) // 26
      this.$emit('input', newDept)
    }
  }
}
</script>
<style lang="scss" scoped>
.w100{
    width: 100%;
}
</style>
